<template>
    <div class="aside" style="">
        <el-row>
            <el-col :span="24" class="logo">
                <a href="/">
                    <el-image :src='require("@/assets/image/logo.png")'></el-image>
                </a>
            </el-col>
            <el-col :span="24" class="menu">
                <!-- 滚动条，将会出现滚动的内容放到上述标签内 -->
                <el-scrollbar>
                    <el-menu :router="true" default-active="/" class="el-menu-vertical-demo" :collapse="isCollapse" :collapse-transition="false"
                            :unique-opened="true" background-color="#2C8E86" text-color="#C1ECE8" active-text-color="#FFF">
                        
                        <el-menu-item index="/">
                            <i class="el-icon-s-home"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-submenu index="0">
                            <template slot="title">
                                <i style="color:" class="el-icon-menu"></i>
                                <span slot="title">平台管理</span>
                            </template>
                            <el-menu-item index="/platformManage">平台管理</el-menu-item>
                        </el-submenu>

                        <el-submenu index="1">
                            <template slot="title">
                                <i style="color:" class="el-icon-user-solid"></i>
                                <span slot="title">用户角色管理</span>
                            </template>
                            <el-menu-item index="/userManage">用户管理</el-menu-item>
                            <el-menu-item index="/userRoleManage">用户角色管理</el-menu-item>
                            <el-menu-item index="/roleApplicationManage">角色应用管理</el-menu-item>
                            <el-menu-item index="/roleApplicationResourcesManage">角色应用资源管理</el-menu-item>
                            <el-menu-item index="/roleResources">角色权限管理</el-menu-item>
                        </el-submenu>
                         <el-submenu index="2">
                            <template slot="title">
                                <i style="color:" class="el-icon-time"></i>
                                <span slot="title">用户临时权限管理</span>
                            </template>
                            <el-menu-item index="/userTemporaryApplicationManage">用户临时应用管理</el-menu-item>
                            <el-menu-item index="/userTemporaryApplicationResourcesManage">用户临时应用资源管理</el-menu-item>
                            <el-menu-item index="/userTemporaryResources">用户临时权限管理</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i style="color:" class="el-icon-location-outline"></i>
                                <span slot="title">应用管理</span>
                            </template>
                            <el-menu-item index="/applicationManage">平台应用管理</el-menu-item>
                            <el-menu-item index="/applicationResourcesManage">应用资源管理</el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <i style="color:" class="el-icon-lock"></i>
                                <span slot="title">权限管理</span>
                            </template>
                            <el-menu-item index="/authorityManage">权限管理</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-scrollbar>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isCollapse: false
        };
    },
    methods: {
        /* 压缩菜单 */
        collapse(isCollapse) {
            this.isCollapse = isCollapse
        },
    }
}
</script>

<style lang="scss" >

    .el-scrollbar {
        height: 100%;
        
        .el-scrollbar__wrap {
            overflow-x: hidden;
            
            .el-scrollbar__view{
                min-height: 100%;
            }
        }
    }

    .aside {
        /* logo高度 */
        .logo {
            height: 110px;
            
            .el-image {
                height: 60px;
                background-color: #FFF;
                overflow: visible;
            }
        }
        /* 菜单滚动条 */
        .menu {
            overflow:scroll; 
            height: calc(100vh - 110px);
            overflow-y: hidden;
            overflow-x: hidden;
        }

        /* 菜单又边框线0 */
        .el-menu {
            border-right: solid 0px #e6e6e6;
        }

        /* 一级菜单边框线 */
        .el-menu-vertical-demo {
            > li {
                background-color: #3BBFB4 !important;
                border-top: 1px solid #00D9D9;
                
                > .el-submenu__title {
                    background-color: #3BBFB4 !important;
                }
            }
            /* 最后一个菜单添加下边框线 */
            > li:last-child {
                border-bottom: 1px solid #00D9D9;
            }
        }

      
        /* 菜单下拉图标颜色 */
        .el-menu-item {
            i {
                color: #C1ECE8;
            }
        }
        /* 获得焦点菜单样式 */
        .el-menu-item:hover {
            box-shadow: 3px 0 0 #ffffff inset;
            color: #FFF;

            i {
                color: #FFF;
            }
            span {
                color: #FFF;
            }
        }
        /* 菜单图标颜色 */
        .el-submenu__title {
            i {
                color: #C1ECE8;
            }
            .el-submenu__icon-arrow {
                color: #C1ECE8;
            }
        }
        /* 激活图标颜色 */
        .el-menu-item.is-active {
            box-shadow: 3px 0 0 #ffffff inset;

            i {
                color: #FFF;
            }
        }
        /* 获得焦点菜单样式 */
        .el-submenu__title:hover {
            box-shadow: 3px 0 0 #ffffff inset;

            i {
                color: #FFF;
            }
            .el-submenu__icon-arrow {
                color: #FFF;
            }
        }
    }
</style>